<template>
	<view class="my_z">
		<!-- #ifndef H5 -->
		<!-- <fui-nav-bar></fui-nav-bar> -->
		<!-- #endif -->
		

		<view class="myinfo-wrap" v-if="userinfo" >
			
		<image class="avatar" :src="userinfo.avatar?userinfo.avatar:'/static/logo.png'" mode=""></image>
	
			<view class="myinfo">
				<view class="name" v-if="userinfo.nickname">{{userinfo.nickname}}</view>
				<view class="num" v-if="userinfo.id">ID：{{userinfo.id}}
				</view >
				
					<view @tap.stop="tz('/pages/index/gonglues')" v-if="userinfo.level==0" style="border-radius: 0.5em;
					height:40rpx;line-height: 38rpx;;background: #3d3d3d;width: 140rpx;text-align:center;color:#fff;
					position: relative;left:300rpx;font-size: 22rpx;top:-35rpx">
						普通用户
					</view>
					
				
					<view @tap.stop="tz('/pages/index/gonglues')" v-if="userinfo.level==1" style="border-radius: 0.5em;
					height:40rpx;line-height: 38rpx;;background: #3d3d3d;width: 140rpx;text-align:center;color:#fff;
					position: relative;left:300rpx;font-size: 22rpx;top:-35rpx">
						初阶合伙人
					</view>
					
					<view @tap.stop="tz('/pages/index/gonglues')" v-if="userinfo.level==2" style="border-radius: 0.5em;
					height:40rpx;line-height: 38rpx;;background: #3d3d3d;width: 140rpx;text-align:center;color:#fff;
					position: relative;left:300rpx;font-size: 22rpx;top:-35rpx">
						进阶合伙人
					</view>
					
					<view @tap.stop="tz('/pages/index/gonglues')" v-if="userinfo.level==3" style="border-radius: 0.5em;
					height:40rpx;line-height: 38rpx;;background: #3d3d3d;width: 140rpx;text-align:center;color:#fff;
					position: relative;left:300rpx;font-size: 22rpx;top:-35rpx">
						高阶合伙人
					</view>
			</view>
		</view>
		
		<view style="position: absolute;top:30rpx;right: 0px;">
			<image  @click="jumpSetting" style="width: 100rpx;height: 100rpx;" src="/static/my/ic_lomo_mine_setting.png" mode="aspectFill"></image>
			<image  @click="xiaoxi()" style="width: 100rpx;height: 100rpx;" src="/static/my/ic_notice_entry.png" mode="aspectFill"></image>
			<view style="border-radius: 15em;height: 15rpx;width: 15rpx;background: red;position: relative;left: 165rpx;top:-80rpx">
				
			</view>
		</view>

		<view v-if="userinfo" class="total-wrap" @click="tz('/pages/my/gold')">
			<image class="total_bg" src="/static/my_total.png" mode="aspectFill"></image>

			<view class="total-area">
				<view class="total-label">我的金币</view>
				<view class="total-num">
					<text class="num">{{userinfo.money}}</text>
					<text class="unit">
						<!-- 块 -->
						</text>
				</view>
			</view>
		</view>
		<view  class="nav-wrap">
			<view class="nav-title">我的订单</view>
		
			<view class="navs">
				<view @click="navClickHandle(item)" v-for="(item, index) in orderList" :key="index" class="nav">
					<image class="nav-icon" :src="item.icon" mode="aspectFill"></image>
					<view class="nav-text">{{ item.label }}</view>
				</view>
			</view>
		</view>

		<view class="invite-wrap">
			<view class="cell">
				<view class="label">
					<text class="label-text">邀请好友</text>
					<text class="label-tips">得奖励</text>
				</view>
				<view class="value" @click="share_dea()">
					<text>详情</text>
					<image src="/static/arrowright.png" class="arrow"></image>
				</view>
			</view>
			<view class="cell-tips">好友会为你贡献一定比例的奖励</view>
			<view class="total"  v-if="userinfo">
				<view class="total-item" @tap.stop="tz('/pages/my/my_log?type=6')">
					<view class="total-number">
						<text class="num">{{userinfo.ks_his}}</text>
						<text class="unit">个</text>
					</view>
					<view class="total-desc">共获得矿石</view>
				</view>

				<view class="total-item border" @tap.stop="tz('/pages/share/share_dea')">
					<view class="total-number">
						<text class="num">{{userinfo.ch_num}}</text>
						<text class="unit">个</text>
					</view>
					<view class="total-desc">好友数</view>
				</view>

				<button @click="jumpShare" class="btn-invite">邀请好友</button>
			</view>
		</view>

		<view class="nav-wrap">
			<view class="nav-title">常用功能</view>

			<view class="navs">
				<view @click="navClickHandle(item)" v-for="(item, index) in navList" :key="index" class="nav">
					<image class="nav-icon" :src="item.icon" mode="aspectFill"></image>
					<view class="nav-text">{{ item.label }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [
					{ icon: '/static/my/ic_shop_mall_save.png', label: '全部订单', url: '/pages/my/my_order' },
					{ icon: '/static/my/ic_confirm_receipt.png', label: '待付款', url: '/pages/my/my_order?type=1' },
					{ icon: '/static/my/ic_shop_card_cabinet.png', label: '待发货', url: '/pages/my/my_order?type=2' },
					{ icon: '/static/my/ic_shop_mall_copyright_product.png', label: '待收货', url: '/pages/my/my_order?type=3' },
				],
				navList: [
					// { icon: '/static/a1.png', label: '我的钱包', url: '/pages/my/mywallet' },
					 {icon: '/static/a8.png', label: '我的矿石', url: '/pages/my/my-score' },
				
					{ icon: '/static/a2.png', label: '邀请好友', url: '/pages/share/share_msg' },
					{ icon: '/static/a3.png', label: '收货地址', url: '/pages/index/select' },
					// { icon: '/static/a4.png', label: '帮助中心', url: '/pages/my/wenti' },
					// { icon: '/static/a5.png', label: '支付宝绑定', url: '' },
					// { icon: '/static/a6.png', label: '身份认证', url: '' },
					// { icon: '/static/a7.png', label: '检查更新', url: '' },
		
					// { icon: '/static/a9.png', label: '保险箱', url: '' }
				],
				userinfo:null
			};
		},
		onShow() {
			this.get_userinfo();
		},
		methods: {
			tz(url){
				uni.navigateTo({ url: url});
			},
			xiaoxi(){
					uni.navigateTo({ url: "/pages/my/msg_list"});
			},
			share_dea(){
				uni.navigateTo({ url: "/pages/share/share_list"});
			},
			get_userinfo(){
				let that = this;
				uni.showLoading({ title: '正在加载', mask: true });
				uni.hideLoading();
				that.$api.request('/api/user/get_info', {},uni.getStorageSync('token'), function(res) {
								uni.hideLoading()
								if (res.code === 1) {
									that.userinfo = res.data
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
				});
				
			},
			// 导航点击处理
			navClickHandle(item) {
				if (item.url) {
					uni.navigateTo({ url: item.url });
				}
			},

			// 跳转设置
			jumpSetting() {
				uni.navigateTo({
					url: '/pages/settings/settings'
				});
			},

			// 跳转分享页面
			jumpShare() {
				uni.navigateTo({
					url: '/pages/share/share'
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		background: #f3f3f3;
	}
	.my_z{
		background: url("/static/my/99ad642d016c0c2bef719108fd3f073.png") no-repeat;
		background-size: 100%;
	}

	.myinfo-wrap {
		
		padding: 32rpx;
		padding-top:80rpx;
		display: flex;
		align-items: center;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50em;
			overflow: hidden;
		}

		.myinfo {
			padding: 0 32rpx;

			.name {
				font-size: 36rpx;
				font-weight: bold;
			}

			.num {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.total-wrap {
		margin: 24rpx 32rpx;
		position: relative;

		.total_bg {
			width: 100%;
			height: 170rpx;
		}

		.total-area {
			position: absolute;
			left: 180rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #fff;
		}

		.total-label {
			font-size: 30rpx;
			margin-bottom: 12rpx;
		}

		.total-num .num {
			font-size: 48rpx;
			font-weight: bold;
		}

		.total-num .unit {
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.invite-wrap {
		margin: 24rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;

		.cell {
			display: flex;
			align-items: center;

			.label {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.label-text {
				font-size: 30rpx;
				font-weight: bold;
			}
			.label-tips {
				font-size: 26rpx;
				font-style: italic;
				background: red;
				color: #fff;
				padding: 4rpx 10rpx;
				margin-left: 12rpx;
				border-radius: 8rpx;
			}

			.arrow {
				width: 32rpx;
				height: 32rpx;
			}

			.value {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}
		}

		.cell-tips {
			font-size: 24rpx;
			color: #999;
			margin-top: 16rpx;
			margin-bottom: 32rpx;
		}

		.total {
			display: flex;
			align-items: center;

			.total-item {
				width: 33.33%;
			}

			.total-item.border {
				border-left: 1px solid #eee;
				padding-left: 24rpx;
			}

			.total-number .num {
				font-size: 36rpx;
				font-weight: bold;
			}

			.total-number .unit {
				font-size: 32rpx;
			}

			.total-desc {
				font-size: 24rpx;
				color: #999;
			}

			.btn-invite {
				background: #333;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}

	.nav-wrap {
		margin: 24rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 0 24rpx;
		overflow: hidden;

		.navs {
			display: flex;
			flex-wrap: wrap;
		}

		.nav {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 32rpx;
			width: 25%;
		}

		.nav-title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 24rpx 0 32rpx;
		}

		.nav-icon {
			width: 50rpx;
			height: 50rpx;
		}

		.nav-text {
			font-size: 28rpx;
			margin-top: 12rpx;
		}
	}
</style>
